<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="编号" prop="projectNumber">
        <el-input
          v-model="queryParams.projectNumber"
          placeholder="编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属行业" prop="industry">
        <el-input
          v-model="queryParams.industry"
          placeholder="请输入项目所属行业"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属单位" prop="company">
        <el-input
          v-model="queryParams.company"
          placeholder="请输入所属单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="二级单位" prop="secondaryCompany">
        <el-input
          v-model="queryParams.secondaryCompany"
          placeholder="请输入项目所属二级单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目报价" prop="quotedPrice">
        <el-input
          v-model="queryParams.quotedPrice"
          placeholder="请输入项目报价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开始日期" prop="commencementDate">
        <el-date-picker
          v-model="queryParams.commencementDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="对接人姓名" prop="partyAContact">
        <el-input
          v-model="queryParams.partyAContact"
          placeholder="请输入对接人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="负责人姓名" prop="initiationPersonInCharge">
        <el-input
          v-model="queryParams.initiationPersonInCharge"
          placeholder="请输入负责人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="立项时间" prop="creationDate">
        <el-date-picker
          clearable
          v-model="queryParams.creationDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择立项时间"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="预留字段，用于后续业务扩展" prop="reservedField1">
        <el-input
          v-model="queryParams.reservedField1"
          placeholder="请输入预留字段，用于后续业务扩展"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预留字段，用于后续业务扩展" prop="reservedField2">
        <el-input
          v-model="queryParams.reservedField2"
          placeholder="请输入预留字段，用于后续业务扩展"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:initiation:add']"
          >新增</el-button
        >
      </el-col> -->

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:initiation:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="initiationList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="所属行业" align="center" prop="industry" />
      <el-table-column label="所属单位" align="center" prop="company" />
      <el-table-column
        label="二级单位"
        align="center"
        prop="secondaryCompany"
      />
      <el-table-column
        label="项目内容"
        align="center"
        prop="projectContent"
        show-overflow-tooltip
      />
      <el-table-column label="报价金额" align="center" prop="quotedPrice" />
      <el-table-column
        label="开始日期"
        align="center"
        prop="commencementDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.commencementDate, "{y}-{m}-{d}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="结束日期"
        align="center"
        prop="completionDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.completionDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="对接人姓名" align="center" prop="partyAContact" />
      <el-table-column
        label="负责人姓名"
        align="center"
        prop="initiationPersonInCharge"
      />
      <el-table-column label="编号" align="center" prop="projectNumber" />
      <el-table-column
        label="财务审批"
        align="center"
        prop="financialApproval"
      />
      <el-table-column
        label="管理审批"
        align="center"
        prop="managementApproval"
      />
      <el-table-column
        label="立项时间"
        align="center"
        prop="creationDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.creationDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            >查看详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="
              () => {
                addendumShow = true;
                handleUpdate(scope.row);
              }
            "
            >增项审批</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="
              () => {
                invoiceVettingShow = true;
                handleUpdate(scope.row);
              }
            "
            >发票审批</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改记录项目立项的相关信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="所属行业" prop="industry">
          <!-- <el-input v-model="form.industry" placeholder="请输入所属行业" /> -->
          {{ form.industry }}
        </el-form-item>
        <el-form-item label="所属单位" prop="company">
          <!-- <el-input v-model="form.company" placeholder="所属单位" /> -->
          {{ form.company }}
        </el-form-item>
        <el-form-item label="二级单位" prop="secondaryCompany">
          <el-input
            v-model="form.secondaryCompany"
            placeholder="请输入二级单位"
          />
        </el-form-item>
        <el-form-item label="项目内容">
          <el-input
            v-model="form.projectContent"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入项目内容"
          ></el-input>
          <!-- <editor v-model="form.projectContent" :min-height="192" /> -->
        </el-form-item>
        <el-form-item label="报价金额" prop="quotedPrice">
          <el-input
            v-model="form.quotedPrice"
            placeholder="仅允许输入数字"
            @input="handleInputQuotedPrice"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="开始日期" prop="commencementDate">
          <el-date-picker
            clearable
            v-model="form.commencementDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="completionDate">
          <el-date-picker
            clearable
            v-model="form.completionDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="对接人姓名" prop="partyAContact">
          <el-input
            v-model="form.partyAContact"
            placeholder="请输入对接人姓名"
          />
        </el-form-item>
        <el-form-item label="立项时间" prop="creationDate">
          <el-date-picker
            clearable
            v-model="form.creationDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择立项时间"
          >
          </el-date-picker>
        </el-form-item>

        <div v-show="form.id != null && form.id != '' && form.id != undefined">
          <!-- 预算列表 -->
          <div style="flex: 1; margin-right: 20px">

            <!-- 供应商采购 -->
            <div v-if="vendorAddList.length > 0">
              <div
                style="margin: 20px 30px; font-size: 20px; font-weight: bold"
              >
                供应商采购
              </div>

              <listTop></listTop>

              <div v-for="(item, index) in vendorAddList" :key="index">
                <el-row
                  style="
                    margin-bottom: 20px;
                    margin-top: 20px;
                    text-align: center;
                  "
                >
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.serialNumber }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.categoryName }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.specificationModel }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.supplier }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.quantity }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.unitPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.totalBudget }}
                  </el-col>
                  <el-col :span="2">
                    <div>无权限</div>
                  </el-col>
                </el-row>

                <div style="border: 2px solid #ccc" v-if="item.oaOtheraPurchases.length > 0">
                  <baiListTop></baiListTop>

                  <el-row
                    style="padding: 15px 20px; text-align: center"
                    v-for="(item, costIndex) in item.oaOtheraPurchases"
                    :key="costIndex"
                  >
                    <el-col :span="2"> 无权限 </el-col>
                    <el-col :span="2">
                      {{ index + 1 }}
                    </el-col>
                    <el-col :span="3">
                      {{ item.purchaseTableSequence }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.actualPrice }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentDate }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.verifiedAmount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentAmount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.invoiceStatus }}
                    </el-col>
                    <el-col :span="2">
                      <!-- {{ item.uploadedInvoice }} -->
                      <span
                        style="border-bottom: 1px solid #569cd6; color: #569cd6"
                        >查看发票</span
                      >
                    </el-col>
                    <!-- <el-col :span="2">
                      {{ item.reimbursementPaymentDate }}
                    </el-col> -->
                    <el-col :span="2">
                      {{ item.paymentAccount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.filler }}
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '通过')
                        "
                        >通过</el-button
                      >
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '拒绝')
                        "
                        >拒绝</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>

            <!-- 电商采购 -->
            <div v-if="ECommerceAddList.length > 0">
              <div
                style="margin: 20px 30px; font-size: 20px; font-weight: bold"
              >
                电商采购
              </div>

              <listTop></listTop>

              <div v-for="(item, index) in ECommerceAddList" :key="index">
                <el-row
                  style="
                    margin-bottom: 20px;
                    margin-top: 20px;
                    text-align: center;
                  "
                >
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.serialNumber }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.categoryName }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.specificationModel }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.supplier }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.quantity }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.unitPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.totalBudget }}
                  </el-col>
                  <el-col :span="2">
                    <div>无权限</div>
                  </el-col>
                </el-row>

                <div style="border: 2px solid #ccc" v-if="item.oaOtheraPurchases.length > 0">
                  <baiListTop></baiListTop>

                  <el-row
                    style="padding: 15px 20px; text-align: center"
                    v-for="(item, costIndex) in item.oaOtheraPurchases"
                    :key="costIndex"
                  >
                    <el-col :span="2"> 无权限 </el-col>
                    <el-col :span="2">
                      {{ index + 1 }}
                    </el-col>
                    <el-col :span="3">
                      {{ item.purchaseTableSequence }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.actualPrice }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentDate }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentAmount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.invoiceStatus }}
                    </el-col>
                    <el-col :span="2">
                      <!-- {{ item.uploadedInvoice }} -->
                      <span
                        style="border-bottom: 1px solid #569cd6; color: #569cd6"
                        >查看发票</span
                      >
                    </el-col>
                    <!-- <el-col :span="2">
                      {{ item.reimbursementPaymentDate }}
                    </el-col> -->
                    <el-col :span="2">
                      {{ item.paymentAccount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.filler }}
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '通过')
                        "
                        >通过</el-button
                      >
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '拒绝')
                        "
                        >拒绝</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>

            <!-- 零星采购 -->
            <div v-if="sporadicAddList.length > 0">
              <div
                style="margin: 20px 30px; font-size: 20px; font-weight: bold"
              >
                零星采购
              </div>

              <listTop></listTop>

              <div v-for="(item, index) in sporadicAddList" :key="index">
                <el-row
                  style="
                    margin-bottom: 20px;
                    margin-top: 20px;
                    text-align: center;
                  "
                >
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.serialNumber }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.categoryName }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.specificationModel }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.supplier }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.quantity }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.unitPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.totalBudget }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                </el-row>

                <div style="border: 2px solid #ccc" v-if="item.oaOtheraPurchases.length > 0">
                  <baiListTop></baiListTop>

                  <el-row
                    style="padding: 15px 20px; text-align: center"
                    v-for="(item, costIndex) in item.oaOtheraPurchases"
                    :key="costIndex"
                  >
                    <el-col :span="2"> 无权限 </el-col>
                    <el-col :span="2">
                      {{ index + 1 }}
                    </el-col>
                    <el-col :span="3">
                      {{ item.purchaseTableSequence }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.actualPrice }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentDate }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentAmount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.invoiceStatus }}
                    </el-col>
                    <el-col :span="2">
                      <!-- {{ item.uploadedInvoice }} -->
                      <span
                        style="border-bottom: 1px solid #569cd6; color: #569cd6"
                        >查看发票</span
                      >
                    </el-col>
                    <!-- <el-col :span="2">
                      {{ item.reimbursementPaymentDate }}
                    </el-col> -->
                    <el-col :span="2">
                      {{ item.paymentAccount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.filler }}
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '通过')
                        "
                        >通过</el-button
                      >
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '拒绝')
                        "
                        >拒绝</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>

            <!-- 其他采购 -->
            <div v-if="otherAddList.length > 0">
              <div
                style="margin: 20px 30px; font-size: 20px; font-weight: bold"
              >
                其他采购
              </div>

              <listTop></listTop>

              <div v-for="(item, index) in otherAddList" :key="index">
                <el-row
                  style="
                    margin-bottom: 20px;
                    margin-top: 20px;
                    text-align: center;
                  "
                >
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.serialNumber }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.categoryName }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.specificationModel }}
                  </el-col>
                  <el-col :span="4">
                    {{ item.supplier }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.quantity }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.unitPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.totalBudget }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                </el-row>

                <div style="border: 2px solid #ccc" v-if="item.oaOtheraPurchases.length > 0">
                  <baiListTop></baiListTop>

                  <el-row
                    style="padding: 15px 20px; text-align: center"
                    v-for="(item, costIndex) in item.oaOtheraPurchases"
                    :key="costIndex"
                  >
                    <el-col :span="2"> 无权限 </el-col>
                    <el-col :span="2">
                      {{ index + 1 }}
                    </el-col>
                    <el-col :span="3">
                      {{ item.purchaseTableSequence }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.actualPrice }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentDate }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.paymentAmount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.invoiceStatus }}
                    </el-col>
                    <el-col :span="2">
                      <!-- {{ item.uploadedInvoice }} -->
                      <span
                        style="border-bottom: 1px solid #569cd6; color: #569cd6"
                        >查看发票</span
                      >
                    </el-col>
                    <!-- <el-col :span="2">
                      {{ item.reimbursementPaymentDate }}
                    </el-col> -->
                    <el-col :span="2">
                      {{ item.paymentAccount }}
                    </el-col>
                    <el-col :span="2">
                      {{ item.filler }}
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '通过')
                        "
                        >通过</el-button
                      >
                      <el-button
                        @click="
                          costItem('vendorAddCostList', '供应商', item, '拒绝')
                        "
                        >拒绝</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getInitiation,
  getChargeList,
  updateFinancialApproval,
  updateAddendum,
  updateInvoiceVetting,
} from "@/api/project/initiation";
import { getCarbonDetail } from "@/api/department/index";
import { page } from "@/api/page";
import { listNumber } from "@/api/project/number";
import listTop from "../../../components/listTop.vue";
import topListCost from "../../../components/topListCost.vue";
import { handleInputQuotedPrice, formatDateArray } from "@/utils/myUtil";

export default {
  name: "Initiation",
  components: {
    listTop,
    topListCost,
  },
  data() {
    return {
      invoiceVettingShow: false,
      addendumShow: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 记录项目立项的相关信息表格数据
      initiationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        industry: null,
        company: null,
        secondaryCompany: null,
        projectContent: null,
        quotedPrice: null,
        commencementDate: null,
        completionDate: null,
        partyAContact: null,
        initiationPersonInCharge: null,
        projectNumber: null,
        financialApproval: null,
        managementApproval: null,
        creationDate: null,
        reservedField1: null,
        reservedField2: null,
        profitMargin: null,
        actualCost: null,
        budgetCost: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 文件上传开关
      openUpload: false,
      // 文件列表
      fileList: [],
      elsxShow: false,
      uploadShow: false,
      uploadTitle: "",
      vendorAddList: [],
      ECommerceAddList: [],
      sporadicAddList: [],
      otherAddList: [],
      openBudget: false,
      initlationFrom: {},
      openCost: false,
      vendorAddCostList: [],
      ECommerceAddCostList: [],
      sporadicAddCostList: [],
      otherAddCostList: [],
      suppliersList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询记录项目立项的相关信息列表 */
    async getList() {
      this.loading = true;

      await getChargeList(this.queryParams).then((response) => {
        this.initiationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

      await listNumber(page).then((res) => {
        console.log("类型列表:", res.rows);
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        industry: null,
        company: null,
        secondaryCompany: null,
        projectContent: null,
        quotedPrice: null,
        commencementDate: null,
        completionDate: null,
        partyAContact: null,
        initiationPersonInCharge: null,
        projectNumber: null,
        financialApproval: null,
        managementApproval: null,
        creationDate: null,
        reservedField1: null,
        reservedField2: null,
        profitMargin: null,
        actualCost: null,
        budgetCost: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加记录项目立项的相关信息";
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      this.vendorAddList = [];
      this.ECommerceAddList = [];
      this.sporadicAddList = [];
      this.otherAddList = [];

      this.vendorAddCostList = [];
      this.ECommerceAddCostList = [];
      this.sporadicAddCostList = [];
      this.otherAddCostList = [];

      this.reset();
      const id = row.id || this.ids;
      getInitiation(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改记录项目立项的相关信息";
      });

      await getCarbonDetail(id).then((response) => {
        console.log("立项采购数据:", response.data);
        // 遍历 response.data.oaOthers，根据 type 划分到不同数组
        response.data.oaOtherVo.forEach((item) => {
          switch (item.type) {
            case "供应商":
              this.vendorAddList.push(item);
              break;
            case "电商":
              this.ECommerceAddList.push(item);
              break;
            case "零星":
              this.sporadicAddList.push(item);
              break;
            case "其他":
              this.otherAddList.push(item);
              break;
            default:
              console.error("未知的采购类型:", item.type);
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.addendumShow) {
        return;
      } else if (this.invoiceVettingShow) {
        updateInvoiceVetting(this.form.id, "通过").then((res) => {
          console.log("发票审批通过");
          this.invoiceVettingShow = false;
        });
      } else {
        updateFinancialApproval(this.form.id, "同意").then((res) => {
          console.log("修改成功");
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm(
          '是否确认删除记录项目立项的相关信息编号为"' + ids + '"的数据项？'
        )
        .then(function () {
          return delInitiation(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/initiation/export",
        {
          ...this.queryParams,
        },
        `initiation_${new Date().getTime()}.xlsx`
      );
    },
    // 重置数组函数
    resetArrays() {
      this.vendorAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "供应商",
        },
      ];
      this.ECommerceAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "电商",
        },
      ];
      this.sporadicAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "零星",
        },
      ];
      this.otherAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "其他",
        },
      ];
    },

    handleInputQuotedPrice(value) {
      // 调用工具函数
      this.form.quotedPrice = handleInputQuotedPrice(value);
    },
    costItem() {},
  },
};
</script>

<style lang="scss">
/* 统一表单项间距 */
.el-form-item {
  margin-bottom: 12px;
}

/* 输入框圆角优化 */
.el-input__inner {
  border-radius: 4px;
}
</style>
